<template>
	<view>
		<view class="content">
			<u-navbar title="灾情上报详情" :title-size="36" :title-width="500" title-color="#fff"
				back-icon-name="arrow-left" back-icon-color="#fff" :background="background" :custom-back="goBack">
				<view class="navbar-right" slot="right">
				       <view class="message-box right-item" style="padding-right: 40rpx; color: white" @click="revise">
				       修改
				       </view>
				 </view>
			</u-navbar>
			<view class="list">
				<div class="listBox">
				<view class="list-center">
					<span>所属事件</span>
					<span>{{list.incidentName}}</span>
				</view>
				<view class="list-center">
					<span>受灾区域</span>
					<span>{{list.regionAffected}}</span>
				</view>
				<view class="list-center">
					<span>所属街道</span>
					<span>{{list.streetName}}</span>
				</view>
				<view class="list-center">
					<span>受灾时间</span>
					<span>{{list.disasterTime}}</span>
				</view>
				<view class="list-center">
					<span>受淹面积</span>
					<span>{{list.submergedArea}}km²</span>
				</view>
				<view class="list-center">
					<span>受淹农作物</span>
					<span>{{list.submergedNzwArea}}km²</span>
				</view>
				<view class="list-center">
					<span>受淹乡镇</span>
					<span>{{list.floodedTowns}}个</span>
				</view>
				<view class="list-center">
					<span>受淹道路</span>
					<span>{{list.floodedRoad}}条</span>
				</view>
				<view class="list-center">
					<span>受灾人口</span>
					<span>{{list.humanAffected}}人</span>
				</view>
				</div>
				<div class="listBox">
				<view class="list-center">
					<span>因灾死亡失踪人口</span>
					<span>{{list.humanDeath}}人</span>
				</view>
				<view class="list-center">
					<span>倒塌房屋</span>
					<span>{{list.buildCounts}}户</span>
				</view>
				<view class="list-center">
					<span>紧急转移安置人口</span>
					<span>{{list.humanTransfer}}人</span>
				</view>
				<view class="list-center">
					<span>因灾死亡大型牲口</span>
					<span>{{list.livestockDeath}}头</span>
				</view>
				</div>
				<div class="listBox">
				<view class="list-center">
					<span>居民住房财产损失</span>
					<span>{{list.monLoss}}元</span>
				</view>
				<view class="list-center">
					<span>农业损失</span>
					<span>{{list.nyLoss}}元</span>
				</view>
				<view class="list-center">
					<span>工业损失</span>
					<span>{{list.gyLoss}}元</span>
				</view>
				<view class="list-center">
					<span>商贸损失</span>
					<span>{{list.smLoss}}元</span>
				</view>
				<view class="list-center">
					<span>救灾投入</span>
					<span>{{list.jzLoss}}元</span>
				</view>
				<view class="list-center">
					<span>其他</span>
					<span>{{list.qtLoss}}元</span>
				</view>
				<view>
					<span>备注说明</span>
					<p style="width:70%;word-wrap: break-word;margin-left:30%;margin-top:-38rpx;">{{list.remark}}</p>
				</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			 this.incidentId = option.incident
			 this.streetId = option.streetId
			 this.id = option.id
			 if(option.incident && option.streetId) {
				let list = {
					incidentId: this.incidentId,
					streetId: this.streetId
				}
				console.log(list)
				this.$api.reqApi.getIncidentAssessDetails(list).then(res=>{
					this.list = res.data
					// this.incidentName = res.data.incidentName
					// this.streetName = res.data.streetName
				})
			 }
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				list: []
			}
		},
		mounted: {
		},
		methods: {
			revise() {
				uni.navigateTo({url: '/pages/scheduling/disasterReport/index?id='+this.id+'&streetId='+this.streetId+'&incident='+this.incidentId})
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-bottom: 40rpx;
	}
	
	.listBox{
		margin-top: 26rpx;
		padding: 0rpx 30rpx;
		
		background-color: #fff;
		.list-center:last-child{
			border-bottom:0
		}
	}
</style>
